<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>智慧物流应用平台加油端</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/guiji.css">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrap1">
			<div class="top">
				<div class="top-inner w-m clearfix">
					<div class="left fl">
						<img src="img/logo.png" >
						<span>智慧物流应用平台</span>
					</div>
					<div class="right fr">
						<a href="javascript:;" onclick="tanfa()">无运单开阀</a>
						<a href=""><img src="img/editor.png" > 修改密码</a>
						<a href=""><img src="img/close.png" > 退出</a>
					</div>
				</div>
			</div>
			<div class="nav">
				<div class="w-m clearfix">
					<p class="fl">四川销售成都分公司水碾河加油站</p>
					<p class="fr">
						<a href="index.html">首页</a>
						<a href="history.html">历史计划</a>
						<a href="guiji.html" class="on">轨迹回放</a>
					</p>
				</div>
			</div>
			<div class="main w-m">
				<div class="box1">
					<div id="allmap" style="width: 100%; height:100%;"></div>
				</div>
				<div class="box2">
					<p>
						<img src="img/ling.png" >
						<span>报警1：阀门未关  2020-11-12 14:23:23  前仓上阀门</span>
						<a href="">查看</a>
					</p>
					<p>
						<img src="img/ling.png" >
						<span>报警1：阀门未关  2020-11-12 14:23:23  前仓上阀门</span>
						<a href="">查看</a>
					</p>
					<p>
						<img src="img/ling.png" >
						<span>报警1：阀门未关  2020-11-12 14:23:23  前仓上阀门</span>
						<a href="">查看</a>
					</p>
				</div>
				<div class="box3">
					<div class="choose">
						<p>
							<span>车辆选择</span>
							<select>
								<option value ="1">川AR1211</option>
								<option value ="1">川AR1211</option>
								<option value ="1">川AR1211</option>
							</select>
							<span>结束时间</span>
							<input type="date" name="" id="" value="" />
							<button type="button">播放</button>
						</p>
						<p>
							<span>开始时间</span>
							<input type="date" name="" id="" value="" />
							<span>回放速度</span>
							<input type="range" name="" id="" value="" />
							<button type="button">清除</button>
						</p>
					</div>
					<div class="info">
						<div class="table">
							<div class="head">
								<span class="w1">定位时间</span>
								<span class="w2">存储时间</span>
								<span class="w3">速度</span>
								<span class="w1">阀门状态</span>
								<span class="w1">状态</span>
							</div>
							<div class="content">
								<p>
									<span class="w1">2020-11-12<br>12:33:44</span>
									<span class="w2">2020-11-12<br>12:33:44</span>
									<span class="w3 lh">12</span>
									<span class="w1 lh"><a href="">查看</a></span>
									<span class="w1">在线<br>精确定位</span>
								</p>
								<p>
									<span class="w1">2020-11-12<br>12:33:44</span>
									<span class="w2">2020-11-12<br>12:33:44</span>
									<span class="w3 lh">12</span>
									<span class="w1 lh"><a href="">查看</a></span>
									<span class="w1">在线<br>精确定位</span>
								</p>
								<p>
									<span class="w1">2020-11-12<br>12:33:44</span>
									<span class="w2">2020-11-12<br>12:33:44</span>
									<span class="w3 lh">12</span>
									<span class="w1 lh"><a href="">查看</a></span>
									<span class="w1">在线<br>精确定位</span>
								</p>
							</div>
						</div>
						<div class="page">
							<p>上一页</p>
							<p>下一页</p>
						</div>
					</div>
				</div>
				<div class="tan">
					<div class="inner">
						<div class="head">川AR1222</div>
						<ul>
							<li>
								<span>计划A:104油库(四川)-四川销售成都分公司成华二环加油站</span>
								<span class="ing">正在执行</span>
							</li>
							<li>
								<span>计划B:104油库(四川)-四川销售成都分公司成华二环加油站</span>
								<span>未执行</span>
							</li>
							<li>
								<span>计划C:104油库(四川)-四川销售成都分公司成华二环加油站</span>
								<span>未执行</span>
							</li>
							<li>
								<span>计划D:104油库(四川)-四川销售成都分公司成华二环加油站</span>
								<span>未执行</span>
							</li>
							<li>
								<span>计划E:104油库(四川)-四川销售成都分公司成华二环加油站</span>
								<span>未执行</span>
							</li>
						</ul>
						<div class="work">
							<p>
								<span>驾驶员：xxx</span>
								<span>联系电话：13888888888</span>
							</p>
							<p>
								<span>驾驶员：xxx</span>
								<span>联系电话：13888888888</span>
							</p>
						</div>
						<div class="btn">
							<button type="button">实时视频(10)</button>
							<button type="button">历史录像(9)</button>
							<button type="button">轨迹回放(4)</button>
						</div>
					</div>					
				</div>
				
				<div class="tanfa">
					<div class="inner">
						<div class="left fl">
							<p class="title">当前在站车辆</p>
							<p><input type="radio" name="car" id="car1" value="" /><label for="car1">川AR1211</label></p>
							<p><input type="radio" name="car" id="car2" value="" /><label for="car2">川AR1211</label></p>
							<p><input type="radio" name="car" id="car3" value="" /><label for="car3">川AR1211</label></p>
						</div>
						<div class="right fl">
							<div class="title">阀门操作</div>
							<div class="content">
								<div class="tbox1">
									<div class="b-l">
										<p>当前操作车辆</p>
										<p>川AR1211</p>
									</div>
									<div class="b-r">
										<p>车辆状态</p>
										<p>供电：开/关</p>
										<p>供气：开/关</p>
										<p>状态：在线/离线</p>
									</div>
								</div>
								<div class="tbox2">
									<div class="head">
										<span>阀门编号</span>
										<span>操作</span>
										<span>当前状态</span>
									</div>
									<div class="body">
										<p>
											<span>前仓上阀门</span>
											<span>
												<button type="button">开</button>
												<button type="button">关</button>
											</span>
											<span>
												<i></i>
											</span>
										</p>
										<p>
											<span>前仓上阀门</span>
											<span>
												<button type="button">开</button>
												<button type="button">关</button>
											</span>
											<span>
												<i class="col2"></i>
											</span>
										</p>
										<p>
											<span>前仓上阀门</span>
											<span>
												<button type="button">开</button>
												<button type="button">关</button>
											</span>
											<span>
												<i></i>
											</span>
										</p>
										<p>
											<span>前仓上阀门</span>
											<span>
												<button type="button">开</button>
												<button type="button">关</button>
											</span>
											<span>
												<i class="col2"></i>
											</span>
										</p>
										<p>
											<span>前仓上阀门</span>
											<span>
												<button type="button">开</button>
												<button type="button">关</button>
											</span>
											<span>
												<i></i>
											</span>
										</p>
										<p>
											<span>前仓上阀门</span>
											<span>
												<button type="button">开</button>
												<button type="button">关</button>
											</span>
											<span>
												<i class="col2"></i>
											</span>
										</p>
									</div>
									
								</div>
							</div>
						</div>	
						<div class="closefa"><img src="img/cha.png" onclick="closefa()"></div>
					</div>	
					
				</div>
			</div>
		</div>
	</body>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=2NABy5ccZ5eWbuVL6AowgQ9hauA44Eqr"></script>
<script type="text/javascript">
	
	showMap()
	function tanfa(){
		$('.tanfa').show()
	}
	function closefa(){
		$('.tanfa').hide()
	}
	
	$('#allmap').click(function(){
		$('.tan').toggle()
	})
	function showMap(){
		map = new BMap.Map("allmap");
		map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
		map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
		map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);
	}
</script>
</html>